<template>
  <div class="page_body">
    <div class="home_top">
      <img
        class="home_top_back"
        src="../../assets/image/black_icon01.png"
        alt="返回"
        @click="toBackFn()"
      />
      <div class="home_top_title">{{ topTitle }}</div>
    </div>
    <div class="register_body">
      <div
        style="
          width: 100vw;
          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <div class="register_from_box">
          <!-- 身份信息栏 -->
          <div v-if="stepKey != 2">
            <div class="register_from_item border_item">
              <div class="border_item_popup_box" style="height: 100%">
                <div class="coach_register_from_upload_img">
                  <div class="border_item_title">
                    <div class="border_item_title_tips">*</div>
                    个人免冠照片
                  </div>
                  <div
                    class="border_item_popup no_value_item"
                    style="width: 4.8rem; height: 0.94rem; line-height: 0.94rem"
                  >
                    请选择小不超过3M的2寸免冠照
                  </div>
                </div>

                <div class="upload_img_box">
                  <img
                    v-if="userData.photo == null || userData.photo == ''"
                    class="upload_img_box_icon"
                    src="../../assets/image/upload_img_bg03.png"
                  />
                  <img
                    v-if="userData.photo != null && userData.photo != ''"
                    class="upload_img_box_icon"
                    :src="userData.photo"
                  />
                  <input
                    type="file"
                    accept="image/*"
                    ref="uploadImg"
                    id="upload_img_btn"
                    @change="uploadImgBtn($event)"
                    :disabled="!inputKey"
                  />
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                姓名
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入姓名"
                type="text"
                v-model="userData.name"
                maxlength="6"
                :disabled="!inputKey"
              />
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                国籍
              </div>
              <div class="border_item_popup_box" @click="openPopup('country')">
                <div
                  :class="[
                    userData.country == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{ userData.country }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                请选择性别
              </div>
              <div class="border_item_popup_box" @click="openPopup('sex')">
                <div
                  :class="[
                    userData.sex == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{ userData.sex }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                证件类型
              </div>
              <div
                class="border_item_popup_box"
                @click="openPopup('identityType')"
              >
                <div
                  :class="[
                    identityTypevalueObj.label == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{ identityTypevalueObj.label }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                证件号
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入证件号"
                type="text"
                v-model="userData.identity_number"
                maxlength="30"
                :disabled="!inputKey"
              />
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                省
              </div>
              <div class="border_item_popup_box" @click="openPopup('province')">
                <div
                  :class="[
                    userData.province == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{ userData.province }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div
              class="register_from_item border_item"
              style="flex-direction: row; justify-content: space-between"
            >
              <div class="border_item_child">
                <div class="border_item_title">
                  <div class="border_item_title_tips">*</div>
                  市
                </div>
                <div class="border_item_popup_box" @click="openPopup('city')">
                  <div
                    :class="[
                      userData.city == '请选择'
                        ? 'border_item_popup no_value_item'
                        : 'border_item_popup',
                    ]"
                    style="width: 100%"
                  >
                    {{ userData.city }}
                  </div>
                  <img
                    src="../../assets/image/to_icon03.png"
                    class="popup_icon"
                  />
                </div>
              </div>
              <div class="border_item_child">
                <div class="border_item_title">
                  <div class="border_item_title_tips">*</div>
                  区
                </div>
                <div class="border_item_popup_box" @click="openPopup('region')">
                  <div
                    :class="[
                      userData.region == '请选择'
                        ? 'border_item_popup no_value_item'
                        : 'border_item_popup',
                    ]"
                    style="width: 100%"
                  >
                    {{ userData.region }}
                  </div>
                  <img
                    src="../../assets/image/to_icon03.png"
                    class="popup_icon"
                  />
                </div>
              </div>
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                政治面貌
              </div>
              <div
                class="border_item_popup_box"
                @click="openPopup('political_status')"
              >
                <div
                  :class="[
                    userData.political_status == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{ userData.political_status }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div
              class="register_from_item upload_img_item"
              style="justify-content: space-around; margin-top: 0.4rem"
              v-show="userData.identity_type != 0"
            >
              <div class="upload_file_box" v-show="userData.identity_type == 1">
                <img
                  v-if="
                    userData.identity_up == null || userData.identity_up == ''
                  "
                  class="upload_file_box_img"
                  src="../../assets/image/identity_up_img01.png"
                />
                <img
                  v-if="
                    userData.identity_up != null && userData.identity_up != ''
                  "
                  class="upload_file_box_img"
                  :src="userData.identity_up"
                />

                <input
                  type="file"
                  accept="image/*"
                  ref="identityUp"
                  class="upload_file_box_input"
                  @change="uploadIdentityBtn($event)"
                  :disabled="!inputKey"
                />
                <div class="upload_file_box_btn">+上传身份证人像面</div>
              </div>
              <div class="upload_file_box" v-show="userData.identity_type == 1">
                <img
                  v-if="
                    userData.identity_down == null ||
                    userData.identity_down == ''
                  "
                  class="upload_file_box_img"
                  src="../../assets/image/identity_down_img01.png"
                />
                <img
                  v-if="
                    userData.identity_down != null &&
                    userData.identity_down != ''
                  "
                  class="upload_file_box_img"
                  :src="userData.identity_down"
                />
                <input
                  type="file"
                  accept="image/*"
                  ref="identityDown"
                  class="upload_file_box_input"
                  @change="uploadIdentityDownBtn($event)"
                  :disabled="!inputKey"
                />
                <div class="upload_file_box_btn">+上传身份证国徽面</div>
              </div>
              <div class="upload_file_box" v-show="userData.identity_type == 2">
                <img
                  v-if="
                    userData.identity_up == null || userData.identity_up == ''
                  "
                  class="upload_file_box_img"
                  src="../../assets/image/upload_img_bg02.png"
                />
                <img
                  v-if="
                    userData.identity_up != null && userData.identity_up != ''
                  "
                  class="upload_file_box_img"
                  :src="userData.identity_up"
                />
                <input
                  type="file"
                  accept="image/*"
                  ref="uploadUpImg"
                  class="upload_file_box_input"
                  @change="uploadUpImgBtn($event)"
                  :disabled="!inputKey"
                />
                <div class="upload_file_box_btn">+护照个人信息页</div>
              </div>
              <div class="upload_file_box" v-show="userData.identity_type == 2">
                <img
                  v-if="
                    userData.identity_down == null ||
                    userData.identity_down == ''
                  "
                  class="upload_file_box_img"
                  src="../../assets/image/upload_img_bg02.png"
                />
                <img
                  v-if="
                    userData.identity_down != null &&
                    userData.identity_down != ''
                  "
                  class="upload_file_box_img"
                  :src="userData.identity_down"
                />
                <input
                  type="file"
                  accept="image/*"
                  ref="uploadDownImg"
                  class="upload_file_box_input"
                  @change="uploadDownImgBtn($event)"
                  :disabled="!inputKey"
                />
                <div class="upload_file_box_btn">+护照有效签证页</div>
              </div>
              <div
                class="upload_file_box"
                v-show="
                  userData.identity_type == 3 || userData.identity_type == 4
                "
              >
                <img
                  v-if="
                    userData.identity_up == null || userData.identity_up == ''
                  "
                  class="upload_file_box_img"
                  src="../../assets/image/upload_img_bg02.png"
                />
                <img
                  v-if="
                    userData.identity_up != null && userData.identity_up != ''
                  "
                  class="upload_file_box_img"
                  :src="userData.identity_up"
                />
                <input
                  type="file"
                  accept="image/*"
                  ref="uploadUpImg"
                  class="upload_file_box_input"
                  @change="uploadUpImgBtn($event)"
                  :disabled="!inputKey"
                />
                <div class="upload_file_box_btn">+证件照片</div>
              </div>
            </div>
          </div>
          <!-- 信息补充栏 -->
          <div v-if="stepKey > 1">
            <div class="form_tips">
              *提示：“本选项请准确填写，为教练员及裁判员培训服装订购使用。”
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                服装尺寸
                <div class="form_tips_box" @click="viewSizeListFn()">
                  (
                  <img
                    class="view_size_icon"
                    src="../../assets/image/wenhao_icon01.png"
                  />
                  点击查看尺码表)
                </div>
              </div>
              <div
                class="border_item_popup_box"
                @click="openPopup('clothes_size')"
              >
                <div
                  :class="[
                    userData.clothes_size == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{ userData.clothes_size }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                鞋码尺寸:
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入"
                type="number"
                v-model="userData.shoe_size"
                maxlength="5"
                :disabled="!inputKey"
              />
            </div>

            <div
              class="register_from_item border_item"
              style="flex-direction: row; justify-content: space-between"
            >
              <div class="border_item_child">
                <div class="border_item_title">
                  <div class="border_item_title_tips">*</div>
                  身高
                </div>
                <div style="display: flex; align-items: center">
                  <input
                    class="register_from_item_input"
                    placeholder="请输入身高"
                    type="number"
                    v-model="userData.height"
                    maxlength="6"
                    :disabled="!inputKey"
                    style="width: 2.2rem"
                  />
                  <div style="color: #333333; font-size: 0.28rem">CM</div>
                </div>
              </div>
              <div class="border_item_child">
                <div class="border_item_title">
                  <div class="border_item_title_tips">*</div>
                  体重
                </div>
                <div style="display: flex; align-items: center">
                  <input
                    class="register_from_item_input"
                    placeholder="请输入体重"
                    type="number"
                    v-model="userData.weight"
                    maxlength="6"
                    :disabled="!inputKey"
                    style="width: 2.2rem"
                  />
                  <div style="color: #333333; font-size: 0.28rem">KG</div>
                </div>
              </div>
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                工作或学习单位
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入"
                type="text"
                v-model="userData.company"
                maxlength="20"
                :disabled="!inputKey"
              />
            </div>

            <div
              class="register_from_item border_item"
              style="margin-bottom: 0.34rem"
            >
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                常住地址
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入"
                type="text"
                v-model="userData.address"
                maxlength="30"
                :disabled="!inputKey"
              />
            </div>
          </div>
          <div
            class="register_from_send_btn"
            v-if="stepKey < 3"
            @click="nextStep()"
          >
            下一步
          </div>
          <div
            class="register_from_send_btn"
            v-if="stepKey == 3"
            @click="submitDataFn()"
          >
            提交
          </div>
        </div>
      </div>
    </div>

    <!-- 尺码表 -->
    <div class="size_list_body" v-show="sizeListShow">
      <div class="size_list_box">
        <img
          src="../../assets/image/close_icon02.png"
          class="size_list_close"
          @click="closeSizeListFn()"
        />
        <div class="size_list">
          <div class="size_list_title">服装尺码表</div>
          <div class="size_list_item_top">
            <div class="size_list_item_top_val">尺码</div>
            <div class="size_list_item_top_val">身高(cm)</div>
            <div class="size_list_item_top_val">体重(斤)</div>
            <div class="size_list_item_top_val">胸围(cm)</div>
            <div class="size_list_item_top_val">臀围(cm)</div>
          </div>
          <div
            class="size_list_item"
            v-for="(item, index) in sizeListData"
            :key="index"
          >
            <div class="size_list_item_val">{{ item.size }}</div>
            <div class="size_list_item_val">{{ item.height }}</div>
            <div class="size_list_item_val">{{ item.weight }}</div>
            <div class="size_list_item_val">{{ item.bust }}</div>
            <div class="size_list_item_val">{{ item.hipline }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- popup选择器 -->
    <mt-popup
      v-model="popupVisible"
      position="bottom"
      @touchmove.native.stop.prevent
    >
      <div class="popup_body">
        <div class="popup_body_top">
          <div @click="popupCancelFn()" class="popup_body_top_cancel">取消</div>
          <div @click="popupConfirmFn()" class="popup_body_top_confirm">
            确认
          </div>
        </div>
        <mt-picker
          style="width: 100%"
          ref="popupPicker"
          :slots="pickerSlots"
          :visibleItemCount="visibleItemCount"
          :valueKey="valueKey"
          @change="onPickerChange"
        ></mt-picker>
      </div>
    </mt-popup>
  </div>
</template>
<style src="../../assets/css/coach/coachImprove.css" scoped></style>

<script>
import { MessageBox, Indicator, Toast } from "mint-ui";
import cityListData from "../../../public/data/cityData.json";
import nationalityListData from "../../../public/data/nationality.json";

export default {
  name: "eventImprove",
  components: {},
  data() {
    return {
      baseAPIUrl: this.$store.state.baseAPIUrl,
      topTitle: "",
      stepKey: 1, // 步骤条值
      userData: {
        name: "", // 姓名
        photo: "", // 照片
        sex: "请选择", // 性别
        country: "请选择", // 国籍
        identity_type: 0, // 证件类型 1：身份证 2：护照 3：港、澳、台胞证件 4：其它
        identity_number: "", // 证件号
        identity_up: "", // 证件正面
        identity_down: "", // 证件反面
        province: "请选择", // 省
        city: "请选择", // 城市
        region: "请选择", // 区域
        political_status: "请选择", // 政治面貌
        clothes_size: "请选择", // 服装尺寸
        shoe_size: "", // 鞋码
        height: "", // 身高
        weight: "", // 体重
        company: "", // 工作单位
        address: "", // 常住地址
      },
      userCoachId: "", // 学员ID
      uploadUrl: "", // 提交用图片路径Q
      // popup选择相关
      pickerSlots: [], // popup中Slots
      visibleItemCount: 5, // picker备选数
      popupVisible: false, // popup显示
      popupKey: "", // 当前选择器内容
      valueKey: "", // 当 values 为对象数组时，作为文本显示在 Picker 中的对应字段的字段名
      nationalitySlots: [
        {
          flex: 1,
          values: [],
          textAlign: "center",
        },
      ], // 国籍slots
      nationalityChange: "请选择", // 国籍选择值
      sexSlots: [
        {
          flex: 1,
          values: ["请选择", "男", "女"],
          textAlign: "center",
        },
      ], // 性别slots
      sexChange: "请选择", // 性别选择
      identityTypeSlots: [
        {
          flex: 1,
          values: ["请选择", "身份证", "护照", "港、澳、台胞证件", "其他"],
          textAlign: "center",
        },
      ], // 证件类型slots
      identityTypeChange: "请选择", // 证件类型选择
      identityTypevalueObj: {
        value: 0,
        label: "请选择",
      }, // 证件类型选择值
      provinceSlots: [
        {
          flex: 1,
          values: [],
          textAlign: "center",
        },
      ], // 省slots
      provinceChange: "请选择", // 省选择值
      provinceCityData: {}, // 省市区数据集合
      citySlots: [
        {
          flex: 1,
          values: [],
          textAlign: "center",
        },
      ], // 城市slots
      cityChange: "请选择", // 城市选择值
      areaSlots: [
        {
          flex: 1,
          values: [],
          textAlign: "center",
        },
      ], // 区slots
      areaChange: "请选择", // 区选择值
      politicalSlots: [
        {
          flex: 1,
          values: ["请选择", "党员", "群众"],
          textAlign: "center",
        },
      ], // 政治面貌slots
      politicalChange: "请选择", // 服装尺寸选择值
      clothingSizeSlots: [
        {
          flex: 1,
          values: [
            "请选择",
            "男士L",
            "男士XL",
            "男士2XL",
            "男士3XL",
            "男士4XL",
            "女士M",
            "女士L",
            "女士XL",
            "女士2XL",
            "女士3XL",
          ],
          textAlign: "center",
        },
      ], // 政治面貌slots
      clothingSizeChange: "请选择", // 服装尺寸选择值
      inputKey: true, // 输入控制
      uploadIdentityResponse: {
        idname: "",
        idnumber: "",
        uploadUrl: "",
      },
      sizeListShow: false, // 尺码表显示控制
      sizeListData: [
        {
          size: "男士L",
          height: "160-170",
          weight: "105-125",
          bust: "82-90",
          hipline: "84-92",
        },
        {
          size: "男士XL",
          height: "165-175",
          weight: "125-145",
          bust: "88-96",
          hipline: "90-98",
        },
        {
          size: "男士2XL",
          height: "170-180",
          weight: "145-165",
          bust: "94-102",
          hipline: "96-104",
        },
        {
          size: "男士3XL",
          height: "175-185",
          weight: "165-185",
          bust: "100-108",
          hipline: "102-110",
        },
        {
          size: "男士4XL",
          height: "180-190",
          weight: "185-220",
          bust: "106-114",
          hipline: "108-116",
        },
        {
          size: "女士M",
          height: "160-170",
          weight: "90-110",
          bust: "82-90",
          hipline: "84-92",
        },
        {
          size: "女士L",
          height: "165-175",
          weight: "110-120",
          bust: "88-96",
          hipline: "90-98",
        },
        {
          size: "女士XL",
          height: "170-180",
          weight: "120-130",
          bust: "94-102",
          hipline: "96-104",
        },
        {
          size: "女士2XL",
          height: "175-185",
          weight: "130-140",
          bust: "100-108",
          hipline: "102-110",
        },
        {
          size: "女士3XL",
          height: "180-190",
          weight: "140-160",
          bust: "106-114",
          hipline: "108-116",
        },
      ], // 尺码表数据
    };
  },
  created: function () {
    let provinceSlotsList = ["请选择"];
    let citySlotsList = {};

    cityListData.forEach((element) => {
      provinceSlotsList.push(element.name);
      let obj = {};
      element.children.forEach((item) => {
        obj[item.name] = item.children;
      });
      citySlotsList[element.name] = obj;
    });

    let nationalityList = ["请选择"];

    nationalityListData.forEach((element) => {
      nationalityList.push(element.name_cn);
    });

    this.nationalitySlots[0].values = nationalityList;

    this.provinceSlots[0].values = provinceSlotsList;
    this.provinceCityData = citySlotsList;

    this.checkUserInfoFn();
  },
  methods: {
    // 打开popup选择
    openPopup: function (key) {
      let that = this;
      if (this.inputKey) {
        this.popupKey = key;
        this.valueKey = "";
        this.popupVisible = true;
        if (key == "country") {
          this.pickerSlots = this.nationalitySlots;
          this.$refs.popupPicker.setSlotValue(0, this.userData.country);
        }
        if (key == "identityType") {
          this.pickerSlots = this.identityTypeSlots;
          this.$refs.popupPicker.setSlotValue(
            0,
            this.identityTypevalueObj.label
          );
        }
        if (key == "province") {
          this.pickerSlots = this.provinceSlots;
          this.$refs.popupPicker.setSlotValue(0, this.userData.province);
        }
        if (key == "city") {
          // 根据省份选择设置citySlots
          let list = ["请选择"];
          if (
            that.userData.province === "请选择" ||
            that.userData.province === "" ||
            that.userData.province === null
          ) {
            that.citySlots[0].values = list;
          } else {
            let newList = that.provinceCityData[that.userData.province];
            for (let key in newList) {
              list.push(key);
            }
            that.citySlots[0].values = list;
          }
          this.pickerSlots = this.citySlots;
          this.$refs.popupPicker.setSlotValue(0, this.userData.city);
        }
        if (key == "region") {
          // 根据市选择设置areaSlots
          let arealist = ["请选择"];
          if (
            that.userData.city === "请选择" ||
            that.userData.city === "" ||
            that.userData.city === null
          ) {
            that.areaSlots[0].values = arealist;
          } else {
            let newAreaList =
              that.provinceCityData[that.userData.province][that.userData.city];
            newAreaList.forEach((item) => {
              arealist.push(item.name);
            });
            that.areaSlots[0].values = arealist;
          }

          this.pickerSlots = this.areaSlots;
          this.$refs.popupPicker.setSlotValue(0, this.userData.region);
        }
        if (key == "political_status") {
          this.pickerSlots = this.politicalSlots;
          this.$refs.popupPicker.setSlotValue(
            0,
            this.userData.political_status
          );
        }
        if (key == "clothes_size") {
          this.pickerSlots = this.clothingSizeSlots;
          this.$refs.popupPicker.setSlotValue(0, this.userData.clothes_size);
        }
        if (key == "sex") {
          this.pickerSlots = this.sexSlots;
          this.$refs.popupPicker.setSlotValue(0, this.userData.sex);
        }
      }
    },

    // picker选择
    onPickerChange: function (picker, values) {
      if (this.popupKey == "country") {
        if (values[0]) {
          if (values[0] == "") {
            this.nationalityChange = "请选择";
          } else {
            this.nationalityChange = values[0];
          }
        }
      }
      if (this.popupKey == "identityType") {
        if (values[0]) {
          if (values[0] == "") {
            this.identityTypeChange = "请选择";
          } else {
            this.identityTypeChange = values[0];
          }
        }
      }
      if (this.popupKey == "province") {
        if (values[0]) {
          if (values[0] == "") {
            this.provinceChange = "请选择";
          } else {
            this.provinceChange = values[0];
          }
        }
      }
      if (this.popupKey == "city") {
        if (values[0]) {
          if (values[0] == "") {
            this.cityChange = "请选择";
          } else {
            this.cityChange = values[0];
          }
        }
      }
      if (this.popupKey == "region") {
        if (values[0]) {
          if (values[0] == "") {
            this.areaChange = "请选择";
          } else {
            this.areaChange = values[0];
          }
        }
      }
      if (this.popupKey == "political_status") {
        if (values[0]) {
          if (values[0] == "") {
            this.politicalChange = "请选择";
          } else {
            this.politicalChange = values[0];
          }
        }
      }
      if (this.popupKey == "clothes_size") {
        if (values[0]) {
          if (values[0] == "") {
            this.clothingSizeChange = "请选择";
          } else {
            this.clothingSizeChange = values[0];
          }
        }
      }
      if (this.popupKey == "sex") {
        if (values[0]) {
          if (values[0] == "") {
            this.sexChange = "请选择";
          } else {
            this.sexChange = values[0];
          }
        }
      }
    },

    // popup弹窗取消
    popupCancelFn: function () {
      let key = this.popupKey;
      if (key == "country") {
        this.nationalityChange = this.userData.country;
      }
      if (key == "identityType") {
        this.identityTypeChange = this.identityTypevalueObj.label;
      }
      if (key == "province") {
        this.provinceChange = this.userData.province;
      }
      if (key == "city") {
        this.cityChange = this.userData.city;
      }
      if (key == "region") {
        this.areaChange = this.userData.region;
      }
      if (key == "political_status") {
        this.politicalChange = this.userData.political_status;
      }
      if (key == "clothes_size") {
        this.clothingSizeChange = this.userData.clothes_size;
      }
      if (key == "sex") {
        this.sexChange = this.userData.sex;
      }
      this.popupVisible = false;
      this.popupObjVisible = false;
    },

    // popup弹窗确认
    popupConfirmFn: function () {
      let key = this.popupKey;
      if (key == "country") {
        this.userData.country = this.nationalityChange;
      }
      if (key == "identityType") {
        if (this.identityTypevalueObj.label != this.identityTypeChange) {
          this.userData.identity_up = "";
          this.$refs.identityUp.value = "";
          this.userData.identity_down = "";
          this.$refs.identityDown.value = "";
        }
        this.identityTypevalueObj.label = this.identityTypeChange;
        if (this.identityTypeChange === "请选择") {
          this.identityTypevalueObj.value = 0;
        } else if (this.identityTypeChange === "身份证") {
          this.identityTypevalueObj.value = 1;
        } else if (this.identityTypeChange === "护照") {
          this.identityTypevalueObj.value = 2;
        } else if (this.identityTypeChange === "港、澳、台胞证件") {
          this.identityTypevalueObj.value = 3;
        } else {
          this.identityTypevalueObj.value = 4;
        }
        this.userData.identity_type = this.identityTypevalueObj.value;
      }
      if (key == "province") {
        if (this.userData.province != this.provinceChange) {
          this.userData.city = "请选择";
          this.userData.region = "请选择";
        }
        this.userData.province = this.provinceChange;
      }
      if (key == "city") {
        if (this.userData.city != this.cityChange) {
          this.userData.region = "请选择";
        }
        this.userData.city = this.cityChange;
      }
      if (key == "region") {
        this.userData.region = this.areaChange;
      }
      if (key == "political_status") {
        this.userData.political_status = this.politicalChange;
      }
      if (key == "clothes_size") {
        this.userData.clothes_size = this.clothingSizeChange;
      }
      if (key == "sex") {
        this.userData.sex = this.sexChange;
      }
      this.popupVisible = false;
      this.popupObjVisible = false;
    },

    // 提交信息
    submitDataFn: function () {
      let that = this;
      let url = "/mobile/completeUserInfo";
      let data = this.userData;
      if (this.userCoachId != "") {
        data.coach_id = this.userCoachId;
      }
      MessageBox.confirm("确认提交?").then(() => {
        Indicator.open();
        that.axios
          .post(url, data)
          .then((response) => {
            Indicator.close();
            if (response.code == 0) {
              that.$store.commit("set_isRegister", 2);
              sessionStorage.removeItem("COACHREGISTEROBJ");
              that.$router.replace({
                name: "gameCenter",
              });
            } else {
              Toast({
                message: response.msg,
                duration: 3000,
              });
            }
          })
          .catch(function (error) {
            Indicator.close();
            console.log(error);
          });
      });
    },

    // 检查是否完善过信息
    checkUserInfoFn: function () {
      let that = this;
      let url = "/mobile/checkUserInfo";
      let data = {};
      Indicator.open();
      this.axios
        .post(url, data)
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            that.$store.commit("set_isRegister", response.is_complete);
            if (response.is_complete == 2) {
              that.getDetailDataFn();
              that.topTitle = "修改信息";
            } else {
              that.topTitle = "完善信息";
              let temporary = JSON.parse(
                sessionStorage.getItem("COACHREGISTEROBJ")
              );
              if (temporary) {
                that.userData = temporary;
                that.identityTypevalueObj.value = response.info.identity_type;
                if (response.info.identity_type == 1) {
                  that.identityTypevalueObj.label = "身份证";
                }
                if (response.info.identity_type == 2) {
                  that.identityTypevalueObj.label = "护照";
                }
                if (response.info.identity_type == 3) {
                  that.identityTypevalueObj.label = "港、澳、台胞证件";
                }
                if (response.info.identity_type == 4) {
                  that.identityTypevalueObj.label = "其他";
                }
                if (response.info.identity_type == 1) {
                  that.uploadIdentityResponse.idname = response.info.name;
                  that.uploadIdentityResponse.idnumber =
                    response.info.identity_number;
                }
              }
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },

    // 获取用户信息
    getDetailDataFn: function () {
      let that = this;
      let url = "/mobile/getUserInfo";
      let data = {};
      Indicator.open();
      this.axios
        .post(url, data)
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            that.userCoachId = response.info.id;
            that.userData.name = response.info.name;
            that.userData.photo = response.info.photo;
            that.userData.sex = response.info.sex;
            that.userData.country = response.info.country;
            that.userData.identity_type = response.info.identity_type;
            that.userData.identity_number = response.info.identity_number;
            that.userData.identity_up = response.info.identity_up;
            that.userData.identity_down = response.info.identity_down;
            that.userData.province = response.info.province;
            that.userData.city = response.info.city;
            that.userData.region = response.info.region;
            that.userData.political_status = response.info.political_status;
            that.userData.clothes_size = response.info.clothes_size;
            that.userData.shoe_size = response.info.shoe_size;
            that.userData.height = response.info.height;
            that.userData.weight = response.info.weight;
            that.userData.company = response.info.company;
            that.userData.address = response.info.address;
            that.identityTypevalueObj.value = response.info.identity_type;
            if (response.info.identity_type == 1) {
              that.identityTypevalueObj.label = "身份证";
            }
            if (response.info.identity_type == 2) {
              that.identityTypevalueObj.label = "护照";
            }
            if (response.info.identity_type == 3) {
              that.identityTypevalueObj.label = "港、澳、台胞证件";
            }
            if (response.info.identity_type == 4) {
              that.identityTypevalueObj.label = "其他";
            }
            if (response.info.identity_type == 1) {
              that.uploadIdentityResponse.idname = response.info.name;
              that.uploadIdentityResponse.idnumber =
                response.info.identity_number;
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },

    // 上传头像图片
    uploadImgBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
        that.$refs.uploadImg.value = "";
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            let image = new Image();
            image.onload = function () {
              let width = image.width;
              let height = image.height;
              let cl = height / width;
              if (cl >= 1.28 && cl <= 1.52) {
                that.uploadImgFn(res.target.result);
              } else {
                that.$refs.uploadImg.value = "";
                Toast({
                  message: "照片尺寸不合规",
                  duration: 3000,
                });
              }
            };
            image.src = res.target.result;
          };
          reader.readAsDataURL(file);
        }
      }
    },

    // 上传图片到服务器
    uploadImgFn: function (imgData) {
      let that = this;
      let url = "/upload/uploadPhoto";
      let data = {
        image: imgData,
      };
      Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {

            let path = response.image;
            that.uploadUrl = response.image;
            that.userData.photo = path;
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },

    // 上传身份证正面
    uploadIdentityBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        that.$refs.identityUp.value = "";
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            that.uploadIdentityFn(res.target.result, 1);
          };
          reader.readAsDataURL(file);
        }
      }
    },

    // 上传身份证背面
    uploadIdentityDownBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        that.$refs.identityDown.value = "";
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            that.uploadIdentityFn(res.target.result, 2);
          };
          reader.readAsDataURL(file);
        }
      }
    },

    // 上传身份证到服务器
    uploadIdentityFn: function (imgData, type) {
      let that = this;
      let url = "/upload/uploadCard";
      let uploadType = type;
      let data = {
        type: uploadType,
        image: imgData,
      };
      Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            let path = response.image;
            if (uploadType == 1) {
              that.uploadIdentityResponse.uploadUrl = response.image;
              that.uploadIdentityResponse.idname = response.idname;
              that.uploadIdentityResponse.idnumber = response.idnumber;
              that.userData.identity_up = path;
            } else {
              that.userData.identity_down = path;
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },

    // 上传证件照片正面
    uploadUpImgBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
        that.$refs.uploadUpImg.value = "";
      } else {
        let reader = new FileReader();
        reader.onload = (res) => {
          that.uploadCardImgFn(res.target.result, 1);
        };
        reader.readAsDataURL(file);
      }
    },

    // 上传证件照片背面
    uploadDownImgBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
        that.$refs.uploadDownImg.value = "";
      } else {
        let reader = new FileReader();
        reader.onload = (res) => {
          that.uploadCardImgFn(res.target.result, 2);
        };
        reader.readAsDataURL(file);
      }
    },

    // 上传图片到服务器
    uploadCardImgFn: function (imgData, type) {
      let that = this;
      let url = "/upload/uploadImage";
      let uploadType = type;
      let data = {
        source: 7,
        img: imgData,
      };
      Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            let path = response.image_path;
            if (uploadType == 1) {
              that.userData.identity_up = path;
            } else {
              that.userData.identity_down = path;
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },

    // 下一步
    nextStep: function () {
      if (this.stepKey == 1) {
        if (
          this.userData.photo == "" ||
          this.userData.name == "" ||
          this.userData.country == "" ||
          this.userData.sex == "" ||
          this.userData.sex == "请选择" ||
          this.identityTypevalueObj.value == "" ||
          this.identityTypevalueObj.value == 0 ||
          this.userData.identity_number == "" ||
          this.userData.province == "" ||
          this.userData.province == "请选择" ||
          this.userData.city == "" ||
          this.userData.city == "请选择" ||
          this.userData.region == "" ||
          this.userData.region == "请选择" ||
          this.userData.political_status == "" ||
          this.userData.political_status == "请选择" ||
          this.userData.identity_up == ""
        ) {
          Toast({
            message: "请先完善身份信息",
          });
          return false;
        } else {
          if (
            (this.identityTypevalueObj.value == 1 ||
              this.identityTypevalueObj.value == 2) &&
            this.userData.identity_down == ""
          ) {
            Toast({
              message: "请先完善身份信息",
            });
            return false;
          }

          if (this.identityTypevalueObj.value == 1) {
            // 验证身份正则
            let idNumberText =
              /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
            if (!idNumberText.test(this.userData.identity_number)) {
              Toast({
                message: "身份证格式不正确",
              });
              return false;
            } else {
              if (
                this.userData.identity_number !=
                  this.uploadIdentityResponse.idnumber ||
                this.userData.name != this.uploadIdentityResponse.idname
              ) {
                Toast({
                  message: "身份信息与上传照片信息不符",
                });
                return false;
              }
            }
          }

          this.stepKey = this.stepKey + 1;
        }
      } else if (this.stepKey == 2) {
        if (
          this.userData.clothes_size == "" ||
          this.userData.clothes_size == "请选择" ||
          this.userData.shoe_size == "" ||
          this.userData.height == "" ||
          this.userData.weight == "" ||
          this.userData.address == ""
        ) {
          Toast({
            message: "请先完善补充信息",
          });
          return false;
        } else {
          this.stepKey = this.stepKey + 1;
          this.inputKey = false;
        }
      }
    },

    // 查看尺码表
    viewSizeListFn: function () {
      this.sizeListShow = true;
    },

    // 关闭查看尺码表
    closeSizeListFn: function () {
      this.sizeListShow = false;
    },

    // 返回
    toBackFn: function () {
      if (this.stepKey == 1) {
        this.$router.go(-1);
      } else {
        this.stepKey = this.stepKey - 1;
        this.inputKey = true;
      }
    },

    // 选择性别
    checkSexFn: function (val) {
      if (this.inputKey) {
        this.userData.sex = val;
      }
    },
  },
  watch: {
    userData: {
      handler(newval, oldval) {
        // console.log(newval);
        // console.log(oldval);
        sessionStorage.setItem("COACHREGISTEROBJ", JSON.stringify(newval));
      },
      deep: true,
    },
  },
};
</script>
